<template>
    <div>
        <nav-title></nav-title>
        <div class="body_bg">
            <el-row>
                <el-col :span="8">
                    <div style="border: 2px solid transparent;overflow: hidden;">
                        <role-table @change="roleTableChange"/>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div style="border: 2px solid transparent;overflow: hidden;">
                        <with-role-user-table :roleId="selectRoleId" :sysCode="selectSysCode"/>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
  import CommonPage from '../../../components/common/CommonPage.vue'
  import RoleTable from './RoleTable.vue'
  import WithRoleUserTable from './WithRoleUserTable.vue'
  import NavTitle from '../../../components/common/NavTitle'

  export default {
    components: {
      WithRoleUserTable,
      RoleTable,
      CommonPage,
      NavTitle
    },
    data () {
      return {
        easyPage: {
          current: 1,
          size: 10
        },
        queryForm: {},
        selectRoleId: '',
        selectSysCode:'',
        treeData: [],
        treeCheckedKeys: [],
        treeProps: {
          children: 'children',
          label: 'menuName'
        }
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        let self = this
        Object.assign(self.queryForm, {
          current: self.easyPage.current,
          size: self.easyPage.size
        })
        self.$axios
          .post('roleAction/findEasyPage', self.queryForm)
          .then((res) => {
            self.easyPage = res.data
          })
      },
      roleTableChange (data) {
        console.log('roleTableChange',data)
        this.selectRoleId = data.roleId
        this.selectSysCode = data.sysCode
      },
    }
  }
</script>